import React, { useState, useEffect } from "react";
import { Layout, Menu, theme, Dropdown, Space } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "./css/app.css";
import { Routes, Route, Link, useNavigate, Navigate } from "react-router-dom";
import Home from "./pages/Home/home"; // 引入Home组件
// import HomeDetailPage from "./pages/Home/homeDetailPage";
import WorkList from "./pages/WorkList/workList";
import JobPage from "./pages/WorkList/jobPAge";
import JobDetailPage from "./pages/WorkList/jobDetailPage";
import WorkerPage from "./pages/WorkList/workerpage"; //工作人员信息
import WorkerDetailPage from "./pages/WorkList/workerDetailPage";
import ChatPage from "./pages/WorkList/chatPage";
import BailmentList from "./pages/BailmentList/bailmentList";
import RequirementPage from "./pages/BailmentList/requirementPage";
import UserCenter from "./pages/UserCenter/userCenter";
// import Logout from "./pages/Logout/logout";
import User from "./pages/User/user";
import Login from "./pages/Login/login";
import Register from "./pages/Register/register";
import FindPassword from "./pages/FindPassword/findPassword"; //找回密码
import Demand from "./pages/BailmentList/demand";
import BailIssue from "./pages/BailmentList/bailIssue";
import Message from "./pages/UserCenter/message";
import Modify from "./pages/UserCenter/modify";
import Order from "./pages/UserCenter/order";
import Going from "./pages/UserCenter/going";
import Finished from "./pages/UserCenter/finished";
import Unfinished from "./pages/UserCenter/unfinished";
import Recommend from "./pages/Recommend/recommend";

const { Header, Content, Footer } = Layout;

const items = [
  {
    label: <Link to="/usercenter">用户中心</Link>,
    key: "0",
  },
  {
    label: <Link to="/login">退出登录</Link>,
    key: "1",
  },
];

const App = () => {
  const [roleId, setRoleId] = useState(null); // 用户ID状态
  const [items1, setItems1] = useState([]); // 菜单项状态
  const [ifLogin, setIfLogin] = useState(false);

  const fetchRoleId = () => {
    const storedRoleId = localStorage.getItem("role");
    if (storedRoleId) {
      setRoleId(parseInt(storedRoleId, 10));
      setIfLogin(true); // 设置为已登录状态
      console.log(storedRoleId)
    }
  };
  // 模拟从后端获取用户ID的函数
  // const fetchRoleId = () => {
    // const roleid = localStorage.getItem(role)
    // setRoleId(1); //从localStorage中获取roleid
    // 发送请求获取用户ID的逻辑...
    // 假设请求成功后将用户ID设置为1
    // setRoleId(1);
  // };

  useEffect(() => {
    // 在组件挂载时获取用户ID
    fetchRoleId();
  }, []);

  useEffect(() => {
    // 当用户ID变化时，根据用户ID生成菜单项
    if (roleId !== null) {
      // 根据用户ID动态生成菜单项
      const generateItems = (roleId) => {
        console.log("Generating menu items for roleId:", roleId);
        switch (roleId) {
          case 1: // 假设用户ID为1时渲染特定菜单项
            return [
              //添加点击跳转事件（key对应跳转的路由）
              // UserCenter组件中的菜单项，将key属性改为子页面的路径
              {
                label: "首页",
                key: "/home",
              },
              {
                label: "推荐",
                key: "/recommend",
              },
              {
                label: "用户",
                key: "/user",
              },
              {
                label: "我的工作",
                key: "/worklist",
              },
              {
                label: "找工作",
                key: "/jobpage",
              },
              {
                label: "需求",
                key: "/bailmentlist",
              },
              {
                label: "了解我们",
                key: "/requirementPage",
              },
            ];
          case 2: // 用户roleID为2时的菜单项(普通用户)
            return [
              {
                label: "首页",
                key: "/home",
              },
              {
                label: "推荐",
                key: "/recommend",
              },
              {
                label: "需求",
                key: "/bailmentlist",
              },
              {
                label: "了解我们",
                key: "/requirementPage",
              },
              // 其他特定于用户ID为2的菜单项...
            ];
          case 3: // 用户ID为3时的菜单项(家政人员)
            return [
              {
                label: "首页",
                key: "/home",
              },
              {
                label: "推荐",
                key: "/recommend",
              },
              {
                label: "我的工作",
                key: "/worklist",
              },
              {
                label: "找工作",
                key: "/jobpage",
              },
              {
                label: "了解我们",
                key: "/requirementPage",
              },
              // 其他特定于用户ID为4的菜单项...
            ];
          default:
            return [];
        }
      };
      setItems1(generateItems(roleId));
    }
  }, [roleId]);

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  //添加点击跳转事件（key对应跳转的路由）
  const navigate = useNavigate();

  const handleMenuClick = (key) => {
    console.log(key);
    navigate(key);
  };
  return (
    <Layout className="back">
      <Header style={{ display: "flex", alignItems: "center" }}>
        <div className="demo-logo" />
        {ifLogin && (
          <Menu
            className="app-menu"
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            items={items1}
            style={{
              flex: 1,
              minWidth: 0,
            }}
            onClick={({ key }) => handleMenuClick(key)}
          />
        )}
         <span className="user-avatar">
          {/* <img src='/head/h1.jpg' alt="Avatar" className="avatar-image" /> */}
        </span>
        <span className="hover">
          <span className="user" style={{ marginRight: 60 }}>
            {ifLogin && (
              <Dropdown menu={{ items }}>
                <a
                  href="/#"
                  onClick={(e) => e.preventDefault()}
                  className="app-a"
                >
                  <Space>
                    我的
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>
            )}
          </span>
        </span>
      </Header>
      <Content
        className="app-content"
        style={{
          padding: "0 48px",
        }}
      >
        <div
          style={{
            background: colorBgContainer,
            minHeight: 280,
            padding: 24,
            borderRadius: borderRadiusLG,
          }}
        >
          {/* 使用Routes和Route组件 */}

          <Routes>
            {/* 设置默认路由为/login */}
            <Route path="/" element={<Navigate to="/login"></Navigate>} />
            <Route path="/home" element={<Home />} />
            {/* <Route path="/job/:id" element={<HomeDetailPage/>} /> */}
            <Route path="/user" element={<User />} />
            <Route path="/recommend" element={<Recommend />}></Route>
            <Route path="/worklist" element={<WorkList />}></Route>
            <Route path="/jobPAge" element={<JobPage />}></Route>
            <Route path="/jobPAge/:id" element={<JobDetailPage />}></Route>
            <Route path="/workerPage" element={<WorkerPage />}></Route>
            <Route path="/workerPage/:id" element={<WorkerDetailPage />} ></Route>
            <Route path="/chat/:workerId" element={<ChatPage />} ></Route>
            <Route path="/requirementPage" element={<RequirementPage />}></Route>
            <Route path="/bailmentlist" element={<BailmentList />}>
              <Route path="demand" element={<Demand />} />
              <Route path="bailissue" element={<BailIssue />} />
            </Route>
            <Route path="/login"  element={<Login setIfLogin={setIfLogin} />}></Route>
            <Route path="/register" element={<Register />}></Route>
            <Route path="/findPassword" element={<FindPassword />}></Route>
            <Route path="/usercenter" element={<UserCenter />}>
              <Route path="message" element={<Message />} />
              <Route path="modify" element={<Modify />} />
              <Route path="order" element={<Order />} />
              <Route path="going" element={<Going />} />
              <Route path="finished" element={<Finished />} />
              <Route path="unfinished" element={<Unfinished />} />
            </Route>
            {/* <Route path="/logout" element={<Logout />} /> */}
          </Routes>
        </div>
      </Content>
      <Footer
        className="app-footer"
        style={{
          textAlign: "center",
        }}
      >
        catwine ©{new Date().getFullYear()} Created by 9
      </Footer>
    </Layout>
  );
};
export default App;
